<template>
  <div class="wrapper">
    <minbar title="余额" :isPadding="true"></minbar>
    <x-list ref="clist" :config="configData" @receiveData="receiveData" class="x-list">
      <div slot="content">
        <div class="x-top-div">
          <div class="x-top">
            <div class="x-text-div">
                <text class="x-text1">商城余额：</text>
                <text class="x-batext">{{getAccountNum()}}</text>
                <text class="x-text1">元</text>
            </div>
            <div class="x-text-div marginTop30">
                <text class="x-text1">门店余额：</text>
                <text class="x-batext">{{getStoreNum()}}</text>
                <text class="x-text1">元</text>
            </div>
          </div>
        </div>
        <div class="x-content">
          <div class="x-content-div">
            <text class="x-content-title">收支明细</text>
          </div>
          <div class="x-cash-div" v-for="(data,index) in bidayData" :key="index">
            <!-- 标题 -->
            <div class="x-cash-title">
              <text class="iconfont x-cash-icon" :style="getTypeStyle(data.type)">{{getType(data.type)}}</text>
              <text class="x-cash-text ">{{getTitle(data.type)}}</text>
              <text class="x-cash-jine">{{data.price}}</text>
            </div> 
            <!-- 内容 -->
            <div class="x-cash-on">
              <div class="x-cash-content">
                <text class="x-cash-detail">订单号：{{getOrderNo(data.options)}}</text>
              </div>
            </div>
            <!-- 时间 -->
            <div class="x-cash-time">
                <text class="x-cash-timetext">{{getTime(data.create_time)}}</text>
            </div>
          </div> 
        </div>
      </div>
    </x-list>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
export default { 
  components: {
    "minbar" : require("../../../common/component/minbar.vue"),
    "x-list": require("../../../common/component/list.vue")
  },
  data() {
    return {
      bidayData :[],
      /* 列表action配置 */
      configData:{
        pageRow:{
          page:1,
          limit:10
        },
        action:"/member/money/log"
      },
      account:0,
      store:0
    };
  },
  created(){
    /* 获取账户余额 */
    this.getAccount();
  },
  methods: {
    getAccount(){
      /**账户余额 */
      asCore.post("/member/coin/account",{},(data,msg,flag)=>{
        this.account = data.amount;
      });
      asCore.post("/member/money/account",{},(data,msg,flag)=>{
        if(data && data.length>0){
          for(var i=0;i<data.length;i++){
            this.store += data[i]['amount']
          }
        }
      });
    },
    /* 处理余额 */
    getAccountNum(){
      return this.account.toFixed(2);
    },
    getStoreNum(){
      return this.store.toFixed(2);
    },
    /**接收参数 */
    receiveData(type,data){
      if(type=="refresh"){
        this.bidayData = data;
      }else{
        this.bidayData.push(...data);
      }
    },
    /* 根据类型获取图标 */
    getType(type){
      switch (type) {
        case 2:
          return "\ue65b";
          break;
        case 1:
          return "\ue69f";
          break;
        case 3:
          return "\ue640";
          break;
        default:
          break;
      }
    },
    /* 根据类型获取字体颜色 */
    getTypeStyle(type){
      switch (type) {
        case 2:
          return {color:"#d2a13a"};
          break;
        case 1:
          return {color:"#7764b5"};
          break;
        case 3:
          return {color:"#637bb7"};
          break;
        default:
          break;
      }
    },
    /**获取类型标题 */
    getTitle(type){
      switch (type) {
        case 2:
          return "订单消费";
          break;
        case 1:
          return "门店充值";
          break;
        case 3:
          return "订单退款";
          break;
        default:
          break;
      }
    },
    getTime(time){
      return this.formatDate(new Date(time),"yyyy-MM-dd hh:mm:ss");
    },
    /**获取订单号 */
    getOrderNo(data){
      try {
        var result = JSON.parse(data);
        if(result)
          return result['order_sn'];
      } catch (error) {
        return "";
      }
    },
    formatDate(date, fmt){
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    }
  }
};
</script>
<style scoped>
 .iconfont {
        font-family:iconfont;
    }
.wrapper {
  background-color: #fff;
}
.x-top-div {
  padding-bottom: 25px;
  background-color: #1f1e23;
}
.x-top {
  background-color: #6780b9;
  height: 250px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.x-text-div {
    flex-direction: row;
}
.x-text1 {
  font-size: 36px;
  color: #Fff;
}
.x-batext {
  color: #Fff;
  font-size: 50px;
  margin-top: -10px;
}
.marginTop30 {
    margin-top: 30px;
}

.x-content {
  padding: 25px;
  padding-top:0px;
  background-color: #fff;
}
.x-content-div {
  position: sticky;
  padding-top: 25px;
  padding-bottom: 20px;
  background-color: #fff;
  margin-bottom:20px;
}
.x-content-title {
  border-left-color: #735a24;
  border-left-width: 10px;
  padding-left:15px;
  font-size: 32px;
}
.x-cash-div {
  width: 700px;
  background-color: #ffffff;
  border-radius: 15px;
  margin-bottom:40px;
  box-shadow:2px 2px 5px 2px rgba(0, 0, 0, 0.253);
  border-color: #dedede;
  border-width: 1px;
}
.x-cash-div:active {
  background-color: #eee;
}
.x-cash-title {
  height:80px;
  justify-content: center;
  padding-left: 20px;
  border-bottom-color: #999999;
  border-bottom-style:dashed;
  border-bottom-width: 1px;
  flex-direction: row;
}
.x-cash-on {
  padding-left:20px;
  padding-top:20px;
  padding-bottom:20px; 
}
.x-cash-icon {
  font-size:32px;
  line-height: 80px;
  padding-right:10px;
}
.x-cash-content {
  justify-content: center;
  align-items: center;
  padding-left: 25px;
  padding-right: 25px;
  flex-direction: row;
  height: 50px;
}
.x-cash-detail {
  color:#1f1e23;
  font-size:32px;
  flex: 1;
}
.x-cash-text {
  color: #1f1e24;
  font-size: 32px;
  line-height: 80px;
  flex: 1;
}
.x-cash-jine {
  color: #b00b2b;
  font-size: 35px;
  padding-right:25px;
  line-height: 80px;
}
.x-cash-time {
    background-color: #eaeaec;
    height: 55px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    justify-content: center;
    padding-left: 45px;
}
.x-cash-timetext {
    color:#68686a;
    font-size:26px;
}
.x-list {
  position: absolute;
    top: 129;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>

